/******************************************************
===================== TRIUMPH WIDGET ==================
******************************************************/

.triumph-widget {
  background-color: #6e7a60;
  color: white;
  text-align: center;
  padding-top: 4rem;
}

/* ---------- 1. Widget Title SVG ---------- */

.triumph-widget .triumph-widget-title-svg {
  display: block;
  width: 35%;
  margin: auto;
  fill: white;
}

@media screen and (max-width: 760px) {
  .triumph-widget .triumph-widget-title-svg {
    width: 75%;
  }
}

/* ---------- 2. Header (Logo, Text, Button) ---------- */

.triumph-widget .triumph-widget-header .triumph-logo {
  width: 20%;
  margin: 2rem auto;
  fill: white;
}

.triumph-widget .triumph-widget-header p {
  max-width: 85ch;
  margin: auto;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 300;
  letter-spacing: 1px;
}

.triumph-widget .triumph-widget-header .btn {
  display: block;
  width: fit-content;
  white-space: nowrap;
  margin: 2rem auto;
  background-color: white;
  border: 2px solid white;
  color: #6e7a60;
  padding: 0.8rem 2.5rem;
  transition: all 0.4s ease-in-out;
}

@media screen and (max-width: 760px) {
  .triumph-widget .triumph-widget-header .triumph-logo {
    width: 50%;
  }
}

@media (hover: hover) {
  .triumph-widget .triumph-widget-header .btn:hover {
    background-color: #6e7a60;
    color: white;
  }
}

/******************************************************
==================== TRIUMPH MARQUEE ==================
******************************************************/

/* Container */
.marquee {
  --marquee-duration: 30s; /* Μπορείς να το ρυθμίσεις */
  display: flex;
  overflow: hidden;
  width: 100%;
  padding-bottom: 0.5rem;
}

/* Κάθε "ταινία" που κινείται (πρέπει να υπάρχουν 2 στο HTML) */
.marquee__item {
  display: flex;
  flex-direction: row;
  gap: 1rem;

  /* Σημαντικό για Safari */
  flex-shrink: 0;
  min-width: 100%;

  padding: 0.5rem;

  animation-name: marquee-content;
  animation-duration: var(--marquee-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* Εικόνες / cards */
.marquee__item figure {
  aspect-ratio: 16/9;
  max-width: 350px;
  flex: 0 0 350px;
}

/* Pause στο hover (όπου υποστηρίζεται) */
@media (hover: hover) {
  .marquee:hover .marquee__item {
    animation-play-state: paused;
  }
}

/* ---------- Keyframes (standard + webkit) ---------- */

@keyframes marquee-content {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

@-webkit-keyframes marquee-content {
  from {
    -webkit-transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
  }
}